<template>
  <div class="yxp word-list" @click="handlePop">
    <div class="yxp-wordList-top">
      <div class="back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">单词识记</div>
      <div class="yxp-top-r" @click="handleEnd"><img src="@/assets/word/memory-icon.png" />结束识记</div>
    </div>
    <div class="yxp-momery-main">
      <div
        class="yxp-momery-item"
        v-for="(item, i) in dataList"
        :key="item.id"
        :data-i="item.isOrder"
        :class="{ active: (item.num > 0 && curIndex === i) || item.isOrder }"
        @click.stop="handlePlay(item, i)"
      >
        <div class="yxp-momery-item-l">
          <span>{{ item.word }}</span>
        </div>
        <div class="yxp-momery-item-r">
          <span class="word-zh" v-if="item.num === 2 && curIndex === i">{{
            item.translate
          }}</span>
        </div>
        <div class="yxp-momery-detail" @click.stop="handleHelp(item, i)">
          <div class="dot">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="word-detail-item" v-if="item.isShow">
            <span @click.stop="handleTranslate(item, i)">详解</span>
            <span
              v-if="userInfo.is_show_vedio === 1"
              @click.stop="handleVideo(item, i)"
              >助记</span
            >
          </div>
        </div>
      </div>
      <Empty v-if="isNone" />
    </div>
    <div class="yxp-memory-page" v-if="!isNone">
        <div class="yxp-memory-page-item">
          <div class="page-list">
            <div class="prev" @click="handlePage(0)" v-if="pageIndex > 1"></div>
            <span class="page">{{pageIndex}}/{{page}}</span>
            <div class="next" @click="handlePage(1)" v-if="userInfo.is_read_cut === 1"></div>
            <div class="curl" @click="handlePage(1)" v-if="userInfo.is_read_cut === 0 && pageIndex < page"></div>
          </div>
          <div class="audio-icon" @click="handleOrderPlay"></div>
        </div>
    </div>
    <div class="yxp-memory-pop" v-if="isShow">
      <img src="@/assets/word/paper-pop.png" class="paper" />
      <p class="tips" v-if="ispage && page > 1">
        学完第{{ pageIndex - 1 }}组啦!快去场景迁移剪词条吧~
      </p>
      <p class="tips" v-if="!ispage && page > 1 && pageIndex < page">
        学完第{{ pageIndex + 1 }}组啦!快去场景迁移剪词条吧~
      </p>
      <p class="tips" v-if="!ispage && page === pageIndex && page > 1">
        学完第{{ pageIndex }}组啦!快去场景迁移剪词条吧~
      </p>
      <p class="tips" v-if="page === 1">
        学完第{{ pageIndex }}组啦!快去场景迁移剪词条吧~
      </p>
      <div class="btn" @click="handlePaper">开始剪纸条</div>
    </div>
    <Translates
      :isDetail="isDetail"
      :word="word"
      v-if="word !== ''"
      @translate="handleChange"
    />
    <div class="word-video-pop" v-if="isVideo">
      <div class="word-video-pop-mark">
        <img
          src="@/assets/word/close-icon.png"
          class="close"
          @click="isVideo = false"
        />
      </div>
      <video
        :src="videoSrc"
        controls="controls"
        controlsList="nodownload"
        autoplay
      />
    </div>
    <audio ref="audio"></audio>
    <div
      class="mark"
      v-if="isEnd || isBack || isShow || isDetail || isVideo"
    ></div>
    <div class="yxp-wordList-pop" v-if="isEnd">
      <div class="close" @click="isEnd = false"></div>
      <!-- <img src="@/assets/word/close-icon.png" class="close"/> -->
      <p class="tips">{{ tips }}</p>
      <div class="btn">
        <span class="btn-item" @click="handleSure(0)">确定</span>
        <span class="btn-item" @click="isEnd = false">取消</span>
      </div>
    </div>
    <div class="yxp-wordList-pop" v-if="isBack">
      <div class="close" @click="isBack = false"></div>
      <!-- <img src="@/assets/word/close-icon.png" class="close" @click="isBack = false"/> -->
      <p class="tips">是否放弃识记单词</p>
      <div class="btn">
        <span class="btn-item" @click="handleSure(1)">确定</span>
        <span class="btn-item" @click="isBack = false">取消</span>
      </div>
    </div>
  </div>
</template>
<script>
import storage from "@/utils/storage.js";
import Empty from "@/components/Empty.vue";
import Translates from "@/components/Translates.vue";
import { wordVideo } from "@/services/word.js";
export default {
  name: "wordMemory",
  components: {
    Empty,
    Translates,
  },
  data() {
    return {
      curIndex: 0,
      isShow: false,
      isBack: false,
      pageIndex: 1,
      pageSize: 5,
      page: 0,
      total: 0,
      initData: [],
      dataList: [],
      canArr: [],
      remArr: [],
      afterArr: [],
      submitArr: [],
      audioNum: 0, // 小喇叭播放
      isClick: 0, // 点击了几个
      isOrder: true,
      translates: "",
      isDetail: false,
      isVideo: false,
      isEnd: false, // 结束识记pop
      tips: "", // 结束识记text
      videoSrc: "", //助记视频
      wordData: [],
      ispage: true,
      userInfo: {},
      isNone: false,
      word: "",
      course_type: 0,
      package_id: 0,
      height: 0,
    };
  },
  beforeRouteLeave(to, from, next) {
    if (to.path === "/super-read/simulatePaper") {
      from.meta.isBack = true;
      next();
    } else {
      next();
    }
  },
  beforeRouteEnter (to,from,next) {
    console.log(to)
    console.log(from)
    if (to.name === 'wordMemory' && from.name === null) {
      to.meta.isBack = false
    }
    if (to.name === 'wordMemory' && from.name === 'simulatePaper') {
       if (!from.meta.isBack) {
         to.meta.isBack = false
       }
    }
    next()
  },
  activated() {
    console.log(this.$route.meta.isBack);
    if (!this.$route.meta.isBack) {
      this.curIndex = 0;
      this.isShow = false;
      this.isBack = false;
      this.pageIndex = 1;
      this.page = 0;
      this.initData = [];
      this.dataList = [];
      this.canArr = [];
      this.remArr = [];
      this.submitArr = [];
      this.audioNum = 0;
      this.isClick = 0;
      this.isOrder = true;
      this.translates = "";
      this.isDetail = false;
      this.isVideo = false;
      this.isEnd = false;
      this.tips = "";
      this.videoSrc = "";
      this.wordData = [];
      this.ispage = true;
      this.userInfo = {};
      (this.isNone = false), (this.course_type = 0);
      this.package_id = 0;
      if (this.$route.query.package_id) {
        this.package_id = this.$route.query.package_id;
        this.course_type = this.$route.query.course_type;
      }
      let data = storage.get("dataList");
      console.log(data);
      if (data.length === 0) {
        this.isNone = true;
      }
      data.map((item) => {
        item.num = 0;
        item.isShow = false;
        (item.isOrder = false), (item.isStudy = false);
      });
      this.page = Math.ceil(data.length / this.pageSize);
      this.total = data.length;
      this.initData = data;
      this.init();
      let userInfo = storage.get("vuexStoragePad").userInfo;
      this.userInfo = userInfo;
    }
  },
  methods: {
    init() {
      let start = (this.pageIndex - 1) * this.pageSize;
      let end = this.pageIndex * this.pageSize;
      if (this.pageIndex === this.page) {
        end = this.total;
      }
      this.dataList = this.initData.slice(start, end);
    },
    handlePage(type) {
      this.dataList.map((item) => {
        item.isShow = false;
        item.isOrder = false;
        this.$set(item, "num", 0);
      });
      this.isOrder = true;
      this.ispage = type;
      this.audioNum = 0;
      let res = this.dataList.filter((item) => {
        return item.isStudy === true;
      });
      if (res.length < this.dataList.length) {
        this.$toast("当前页还有部分单词没有进行识记不能进行提交");
        return;
      }
      if (type === 0) {
        if (res.length === this.dataList.length) {
          if (this.submitArr.indexOf(this.pageIndex) === -1) {
            this.submitArr.push(this.pageIndex);
            this.stopStudyWord(type);
          } else {
            this.pageIndex--;
            if (this.pageIndex < 1) {
              this.pageIndex = 1;
              this.ispage = 1;
              return;
            }
            this.init();
          }
        }
      } else {
        if (res.length === this.dataList.length) {
          console.log(res.length + '都读了')
          if (this.submitArr.indexOf(this.pageIndex) === -1) {
            this.submitArr.push(this.pageIndex);
            this.stopStudyWord(type);
          } else {
            if (this.userInfo.is_read_cut === 1) {
              this.isShow = true;
            }
            this.pageIndex++;
            if (this.pageIndex > this.page) {
              this.pageIndex = this.page;
              this.ispage = 0;
              return;
            }
            this.init();
          }
        }
      }
    },
    async stopStudyWord(type) {
      this.canArr = [];
      if (this.userInfo.is_read_cut === 1) {
        this.isShow = true;
      }
      if (type === 0) {
        this.pageIndex--;
        if (this.pageIndex < 1) {
          this.pageIndex = 1;
          this.ispage = 1;
          return;
        }
      } else {
        this.pageIndex++;
        if (this.pageIndex > this.page) {
          this.pageIndex = this.page;
          this.ispage = 0;
          return;
        }
      }
      this.init();
    },
    handleOrderPlay() {
      this.dataList.map((item) => {
        item.isOrder = false;
        item.isShow = false;
        this.$set(item, "num", 0);
      });
      let audio = this.$refs.audio;
      console.log(this.audioNum + "***" + this.isOrder);
      let item = this.dataList[this.audioNum];
      this.$set(item, "isOrder", true);
      console.log(this.dataList);
      audio.src = item.project_voice;
      audio.play();
      if (this.isOrder) {
        this.audioNum++;
        if (this.dataList.length === 1) {
          this.audioNum = 0;
        }
        if (this.audioNum === this.dataList.length - 1) {
          this.isOrder = false;
          this.audioNum = this.dataList.length - 1;
        }
      } else {
        this.audioNum--;
        if (this.dataList.length === 1) {
          this.audioNum = 0;
        }
        if (this.audioNum === 0) {
          this.isOrder = true;
          this.audioNum = 0;
        }
      }
      this.curIndex = this.audioNum;
    },
    // 播放语音
    handlePlay(item, i) {
      this.dataList.map((item) => {
        item.isOrder = false;
        item.isShow = false;
      });
      // if (this.canArr.indexOf(item.id) === -1) {
      //   this.canArr.push(item.id);
      // }
      // if (this.remArr.indexOf(item.id) === -1) {
      //   this.remArr.push(item.id);
      // }
      this.curIndex = i;
      let num = item.num;
      num++;
      if (num > 2) num = 1;
      this.$set(item, "num", num);
      this.$set(item, "isStudy", true);
      let audio = this.$refs.audio;
      audio.src = item.project_voice;
      audio.play();
      this.dataList.map((elem, index) => {
        if (index !== i) {
          this.$set(elem, "num", 0);
        }
      });
    },
    // 结束识记
    async handleEnd() {
      let res = this.dataList.filter((item) => {
        return item.isStudy === true;
      });
      if (res.length < this.dataList.length) {
        this.$toast("当前页还有部分单词没有进行识记不能进行提交");
        return;
      }
      if (this.submitArr.indexOf(this.pageIndex) === -1) {
        console.log(3434);
        this.submitArr.push(this.pageIndex);
        this.$loading.show();
        this.$loading.hide();
        this.isEnd = true;
        if (this.remArr.length === this.initData.length) {
          this.tips = "是否结束识记";
          window.localStorage.setItem(
            "afterWord",
            JSON.stringify(this.initData)
          );
        } else {
          this.tips = "还有部分单词没有识记完，是否结束识记";
          let data = this.initData.slice(
            0,
            this.pageSize * this.submitArr.length
          );
          window.localStorage.setItem("afterWord", JSON.stringify(data));
        }
      } else {
        this.isEnd = true;
        if (this.remArr.length === this.initData.length) {
          this.tips = "是否结束识记";
          console.log(this.initData);
          window.localStorage.setItem(
            "afterWord",
            JSON.stringify(this.initData)
          );
        } else {
          this.tips = "还有部分单词没有识记完，是否结束识记";
          let data = this.initData.slice(
            0,
            this.pageSize * this.submitArr.length
          );
          window.localStorage.setItem("afterWord", JSON.stringify(data));
        }
      }
    },
    async handleSure(type) {
      this.isBack = false;
      this.isEnd = false;
      this.submitArr = [];
      if (type === 0) {
        this.$router.replace({
          path: "/super-read/afterStudy",
          query: { ...this.$route.query },
        });
      } else {
        this.$router.go(-1)
        // let path = ''
        // let modal = +this.$route.query.modal
        // console.log(this.$route.query.modal + '咋俩')
        // if (modal === 1) {
        //   path = '/super-read/check-point'
        // } else if (modal === 2) {
        //   path = '/super-read/pushword'
        // } else if (modal === 3) {
        //   path = '/super-read/analysis'
        // }
        // console.log(path)
        // this.$router.push({
        //   path: path,
        //   query: { ...this.$route.query }
        // });
      }
    },
    // 助记
    handleHelp(item, i) {
      this.dataList.map((elem, index) => {
        if (i === index) {
          elem.isShow = true;
        } else {
          elem.isShow = false;
        }
      });
    },
    // 翻译
    handleTranslate(item) {
      this.$set(item, "isShow", false);
      this.isDetail = true;
      this.word = item.word;
    },
    // 助记视频
    async handleVideo(item) {
      this.$loading.show();
      this.$set(item, "isShow", false);
      let data = await wordVideo({ word: item.word });
      if (data.code === 1) {
        this.$loading.hide();
        if (data.data.url === "") {
          this.$toast("暂时没有助记视频哦~");
        } else {
          this.isVideo = true;
          this.videoSrc = data.data.url;
        }
      } else if (data.code === "10001" || data.code === 10001) {
        this.$loading.hide();
        this.$toast("token过期，请重新登录");
      } else {
        this.$loading.hide();
        this.$toast(data.info);
      }
    },
    handlePaper() {
      this.isShow = false;
      let page = 1;
      if (this.page === 1) {
        page = 1;
      } else if (this.pageIndex === this.page && this.ispage === 0) {
        page = this.page;
      } else {
        page = this.ispage ? this.pageIndex - 1 : this.pageIndex + 1;
      }
      this.$router.push({
        path: "/super-read/simulatePaper",
        query: {
          page: page,
        },
      });
    },
    handleBack() {
      this.isBack = true;
    },
    handleChange(val) {
      this.isDetail = val.isDetail;
      this.word = val.word;
    },
    handlePop() {
      this.dataList.map((item) => {
        item.isShow = false;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.yxp-wordList-top {
  width: 100%;
  .yxp-top-r {
    position: absolute;
    right: 40px;
    top: 0;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #27BFA3;
    margin-right: 40px;
    cursor: pointer;
    img {
      display: inline-block;
      vertical-align: middle;
      width: 22px;
      height: 22px;
      margin-right: 9px;
    }
  }
}
.yxp-momery-main {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 800px;
  height: calc(100vh - 170px);
  margin: 0 auto;
  margin-top: 30px;
  .active {
   .yxp-momery-item-l {
      font-size: 40px;
      font-weight: bold;
   }
   .yxp-momery-item-r {
      font-size: 24px;
      font-weight: 400;
   }
  }
  .active {
      .yxp-momery-item-l {
        span {
          font-weight: bold;
        }
      }
      .yxp-momery-item-r {
        font-size: 24px;
        font-weight: 400;
      }
    }
  .yxp-momery-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 800px;
    height: calc((100vh - 270px) / 5);
    min-height: 50px;
    background: #fff;
    border-radius: 10px;
    margin: 0 auto 20px;
    cursor: pointer;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: 0px 0px 10px rgba(39, 191, 163, 0.5);
    }
    &-l {
      font-size: 36px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #011A06;
      padding-left: 40px;
    }
    &-r {
      position: relative;
      .word-zh {
        padding-right: 70px;
      }
    }
    .yxp-momery-detail {
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 30px;
      z-index: 10;
      cursor: pointer;
      .dot {
        position: absolute;
        top: 15px;
        right: 5px;
        display: flex;
        justify-content: flex-start;
        cursor: pointer;
        span {
          display: block;
          width: 5px;
          height: 5px;
          background: #D0DAE3;
          border-radius: 50%;
          margin-right: 5px;
          cursor: pointer;
        }
      }
      .word-detail-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 34px;
        transform: translateX(-50%);
        height: 56px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        background: #3EB29D;
        box-shadow:0px 0px 5px rgba(12,59,19,0.1);
        border-radius: 10px;
        span {
          display: block;
          width: 80px;
          flex: 1;
          text-align: center;
          cursor: pointer;
          &:last-child {
            border-left: 1px solid #39A28F;
          }
        }
        &::before {
          display: block;
          content: '';
          position: absolute;
          left: 50%;
          top: -8px;
          width: 0;
          height: 0;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid #3EB29D;
          margin-left: -8px;
        }
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.yxp-memory-page {
  // display: flex;
  // flex-direction: column;
  // justify-content: flex-end;
  align-self: flex-end;
  width: 100%;
  height: 80px;
  &-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px;
    height: inherit;
    margin: 0 auto;
  }
  .page-list {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .prev,.next,.curl {
      width: 40px;
      height: 40px;
      cursor: pointer;
      &:hover {
        background-color: #e9f9f6;
        border-radius: 100%;
      }
    }
    .prev {
      background: url(../../../assets/word/prev.png) no-repeat;
      background-size: 40px 40px;
    }
    .next {
      background: url(../../../assets/word/next.png) no-repeat;
      background-size: 40px 40px;
    }
    .curl {
      background: url(../../../assets/word/no-next.png) no-repeat;
      background-size: 40px 40px;
    }
    .page {
      color: #27BFA3;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-left: 40px;
      margin-right: 40px;
    }
  }
  .audio-icon {
    width: 30px;
    height: 24px;
    background: url(../../../assets/word/audio-icon.png) no-repeat;
    background-size: 30px 24px;
    &:hover {
      background-image: url(../../../assets/word/audio-hover.png)
    }
  }
}
.yxp-memory-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 360px;
  height: 470px;
  background: #fff;
  border-radius: 20px;
  z-index: 1200;
  .paper {
    display: inline-block;
    width: 280px;
    height: 200px;
    margin: 50px auto 30px;
  }
  .tips {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    padding-left: 40px;
    padding-right: 40px;
  }
  .btn {
    width: 280px;
    height: 50px;
    line-height:50px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    background: #27BFA3;
    border-radius: 100px;
    margin: 28px auto 0;
    cursor: pointer;
  }
}
.word-video-pop {
  position: fixed;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 960px;
  height: 540px;
  background: #fff;
  z-index: 1200;
  &-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    background:rgba(98,98,98,1);
    z-index: 1000;
    .close {
      position: absolute;
      right: 20px;
      top: 15px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/word/close-icon.png) no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
      &:hover {
        background-image: url(../../../assets/word/close-hover.png);
      }
    }
  }
  video {
    width: 100%;
    height: auto;
    z-index: 100;
  }
}
</style>
